<template>
  <div class="bigBox">
    <b>
      <a-tag color="blue" v-if="value == 0">chatGPT3.5</a-tag>
      <a-tag color="orange" v-else-if="value == 1">菲菲聊天</a-tag>
      <a-tag color="green" v-else-if="value == 2">图灵机器人</a-tag>
      <a-tag color="red" v-else-if="value == 3">沫沫聊天</a-tag>
      <a-tag color="yellow" v-else-if="value == 4">傲娇婧枫</a-tag>
    </b>
    <div class="dialogue">
      <div v-for="item in arrs" class="info">
        <div class="chat" v-if="item.type == 'chat'">
          <a-avatar src="src/assets/images/bng_logo.png" alt="" />
          <div class="content">
            <div v-for="(text, i) in item.text.split('```')" v-show="item.text.slice(0, 3) != '```'">
              <pre v-if="i % 2 !== 0 && text.length > 16">
                                <div class="copy" @click="copyContent(text)">复制</div>
                                <span>{{ text }}</span>
              </pre>
              <div v-else>
                {{ text }}
              </div>
            </div>
            <div v-for="(text, i) in item.text.split('```')" v-show="item.text.slice(0, 3) == '```'">
              <pre v-if="i % 2 == 0 && text.length > 16">
                                <div class="copy" @click="copyContent(text)">复制</div>
                                <span>{{ text }}</span>
              </pre>
              <div v-else>
                {{ text }}
              </div>
            </div>
          </div>
          <div></div>
        </div>
        <div class="self" v-if="item.type == 'self'">
          <div></div>
          <div class="content">
            {{ item.text }}
          </div>
          <a-avatar src="src/assets/images/bng_logo_min.png" alt="" />
        </div>
      </div>
      <p class="loading" v-if="disabled">
        <a-space>
          <div>努力加载中</div>
          <a-spin />
        </a-space>
      </p>
    </div>
    <div class="comment">
      <a-dropdown>
        <a class="ant-dropdown-link" @click.prevent>
          <a-avatar size="large" src="src/assets/images/bng_logo_min.png" alt="" />
        </a>
        <template #overlay>
          <a-menu>
            <a-menu-item @click="selectModel(2)">图灵机器人</a-menu-item>
            <a-menu-item @click="selectModel(3)">沫沫聊天</a-menu-item>
            <a-menu-item @click="selectModel(4)">傲娇婧枫</a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
      <a-textarea class="textarea" v-model:value="text" :autoSize='{ minRows: 3, maxRows: 6 }' :rows="3"
        placeholder="请输入问题" />
      <a-button class="btn" :disabled="disabled" type="primary" @click="getData">
        发送
      </a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch, nextTick } from 'vue'
import { trBot, mmBot, jjBot } from '@/api/index'
import { message } from 'ant-design-vue'
const disabled = ref(false)
const text = ref()
const arrs: any = ref([])
const value = ref(2)
const getData = () => {
  disabled.value = true
  const selfInfo = {
    type: 'self',
    text: text.value,
  }
  arrs.value.push(selfInfo)

  if (value.value === 2) {
    trBot({
      msg: text.value,
    })
      .then((result: any) => {
        text.value = ''
        disabled.value = false
        const chatInfo = {
          type: 'chat',
          text: String(result.data),
        }
        arrs.value.push(chatInfo)
      })
      .catch((err: any) => {
        disabled.value = false
        console.log(err)
      })
  } else if (value.value === 3) {
    mmBot({
      msg: text.value,
    })
      .then((result: any) => {
        text.value = ''
        disabled.value = false
        const chatInfo = {
          type: 'chat',
          text: String(result.data.output),
        }
        arrs.value.push(chatInfo)
      })
      .catch((err: any) => {
        disabled.value = false
        console.log(err)
      })
  } else if (value.value === 4) {
    jjBot({
      msg: text.value,
    })
      .then((result: any) => {
        text.value = ''
        disabled.value = false
        const chatInfo = {
          type: 'chat',
          text: String(result.data.output),
        }
        arrs.value.push(chatInfo)
      })
      .catch((err: any) => {
        disabled.value = false
        console.log(err)
      })
  }
}

const copyContent = (text: any) => {
  const el = document.createElement('textarea')
  el.value = text
  document.body.appendChild(el)
  el.select()
  navigator.clipboard
    .writeText(text)
    .then(() => {
      message.success('文本已成功复制到剪贴板')
    })
    .catch((err) => {
      message.error('无法复制文本' + err)
    })
  document.body.removeChild(el)
}

const selectModel = (v: any) => {
  value.value = v
}

watch(arrs.value, () => {
  const pramiryBody: any = document.querySelector('.dialogue')
  nextTick(() => {
    pramiryBody.scrollTo({
      top: pramiryBody.scrollHeight,
      behavior: 'smooth', // 添加平滑过渡动画
    })
  })
})

onMounted(() => { })

</script>

<script lang="ts">
export default {
  name: 'chat'
}
</script>

<style scoped lang="scss">
.bigBox {
  font-size: 16px;
  padding: 5px;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  overflow-y: auto;

  .dialogue {
    height: calc(100% - 130px);
    overflow-y: auto;
    box-sizing: border-box;
    @include scroll-bar();

    .info {
      margin: 5px 0;

      .chat {
        text-align: left;
        display: grid;
        grid-template-columns: 32px 1fr 32px;
        gap: 10px;
        justify-items: left;
        text-indent: 2em;
        position: relative;

        .animation {
          position: absolute;
          top: 0;
          left: 0;
        }
      }

      .self {
        margin: 20px 0;
        display: grid;
        grid-template-columns: 32px 1fr 32px;
        justify-items: right;
        gap: 10px;

        .content {
          text-indent: 2rem;
        }
      }

      .content {
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px rgba(128, 128, 128, 0.2);
        position: relative;



        pre {
          margin-top: 10px;
          border-radius: 5px;
          color: var(--themeColor);
          border: 1px dashed var(--themeColor);
          position: relative;
          background-color: rgba(128, 128, 128, 0.05);
          font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
          padding: 0 20px;

          .copy {
            z-index: 10;
            position: absolute;
            right: 5px;
            top: 2px;
            background-color: rgba(128, 128, 128, 0.3);
            text-align: center;
            text-indent: 0;
            padding: 3px 10px;
            cursor: pointer;
            color: white;
            font-weight: 400;
            transition: all 0.5s;
            border-radius: 3px;

            &:hover {
              background-color: #0080ff;
            }
          }

        }

      }
    }

    .loading {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #1177ff;
    }
  }

  .comment {
    box-sizing: border-box;
    width: calc(100% - 8px);
    position: absolute;
    bottom: 0;
    padding: 30px 10px;
    text-align: center;
    display: grid;
    grid-template-columns: 50px 1fr 150px;
    gap: 10px;
    align-items: center;

    .textarea {
      @include scroll-bar();
    }

    .btn {
      height: 100%;
    }
  }
}
</style>
